<template>
  <div class="img-nav">
    <!-- <h1>{{ msg }}</h1> -->
    
    <div class="img-nav_img" v-bind:style="{position:'relative',backgroundImage:`url(${homeImgNav[1].img})`, backgroundRepeat:'no-repeat', backgroundPosition:'center', backgroundSize: 'cover', height: height*0.7 + 'px', width: '100%' }">
      <div class="mask"></div>
    </div>
    <div class="img-nav_bu">
    <span class="img-nav_des_p">{{homeImgNav[0].des}}<br>SOON
    <!-- <span>&nbsp&nbsp&nbsp&nbsp&nbsp</span>{{ `${day}  ${hr}   ${min}   ${sec}  ` }}<br> -->
    </span>
    <!-- <span class="img-nav_logo_p">BOT</span> -->
    </div>
    
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    height: Number
  },
  components : {
    },
  data() {
    return {
      day: 0, hr: 0, min: 0, sec: 0,
      fullHeight: document.documentElement.clientHeight,
      homeImgNav: [
        {
          img: "http://cdn.behowto.com/japanboy.jpg",
          des: "COMING"
        },
        {
          img: "http://cdn.behowto.com/japanandboy.jpg",
          des: "STILLWALKING 步履不停 结合攻略和社交的游记网站"
        },
        {
          img: "http://cdn.behowto.com/bg3.jpg",
          des: "颢豆 生日纪念CD"
        }
      ]
    };
  },
  mounted: function () {
    this.countdown()
  },
  methods: {
    countdown: function () {
      const end = Date.parse(new Date('2019/02/05'))
      const now = Date.parse(new Date())
      const msec = end - now
      let day = parseInt(msec / 1000 / 60 / 60 / 24)
      let hr = parseInt(msec / 1000 / 60 / 60 % 24)
      let min = parseInt(msec / 1000 / 60 % 60)
      let sec = parseInt(msec / 1000 % 60)
      this.day = day
      this.hr = hr > 9 ? hr : '0' + hr
      this.min = min > 9 ? min : '0' + min
      this.sec = sec > 9 ? sec : '0' + sec
      const that = this
      setTimeout(function () {
        that.countdown()
      }, 1000)
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.img-nav {
  padding-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: center;
}
.img-nav_img {
  width: inherit;
  display: flex;
  /* border: 1px solid #eeeeee; */
}
.img-nav_des_p {
  display: flex;
  font-size: 7.8px;
  font-weight: 400;
  letter-spacing: 1px;
  font-family: DINM, "SF Pro SC", "SF Pro Text", "Myriad Set Pro", "SF Pro Icons",
    "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "Arial",
    sans-serif;
  margin-top: 16.2px;
  letter-spacing: 0px;
}
.img-nav_logo_p {
  display: flex;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 1px;
  margin-top: 10px;
  font-family: DINM, "SF Pro SC", "SF Pro Text", "Myriad Set Pro", "SF Pro Icons",
    "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "Arial",
    sans-serif;
  letter-spacing: 0px;
}
.img-nav_bu {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: left;
  justify-content: space-between;
  text-align: left;
}
.mask {
  position: absolute;
  background: none;
  width: 100%;
  height: inherit;
}

@media only screen and (max-width: 767px) {
  .img-nav {
    padding-top: 0px;
  }
}
</style>
